<template>
  <div class="merchant">
    <div class="merchant-info">
      <div class="merchant-info-name">
        <div class="left">
          <h3>{{ sellerList_x.name }}</h3>
          <div>
            <span><img src="../../assets/star/half.png" alt="" /></span>
            <span class="sellCount">月售{{ sellerList_x.sellCount }}单</span>
          </div>
        </div>
        <div class="right">
          <svg
            t="1648367893231"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2177"
            width="26"
            height="26"
          >
            <path
              d="M535.9 216.7l-22.9 23-22.9-23.1c-89.2-89.7-234.3-90.1-323.9-0.8l-0.8 0.8c-89.7 90.1-89.7 235.8 0 326L476 859.3c20.1 20.4 52.9 20.7 73.4 0.7l0.7-0.7 310.7-316.7c89.7-90.1 89.7-235.8 0-326-89.2-89.7-234.3-90.1-323.9-0.9l-1 1z"
              p-id="2178"
              fill="#d81e06"
            ></path>
          </svg>
          <p>已收藏</p>
        </div>
      </div>
      <div class="merchant-info-detail">
        <ul>
          <li>
            <p>起送价</p>
            <p>{{ sellerList_x.minPrice }}元</p>
          </li>
          <li>
            <p>商家配送</p>
            <p>{{ sellerList_x.deliveryPrice }}元</p>
          </li>
          <li>
            <p>平均配送时间</p>
            <p>{{ sellerList_x.deliveryTime }}min</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="merchant-bulletin">
      <div class="bulletin">
        <p>活动与公告</p>
        <p>{{ sellerList_x.bulletin }}</p>
      </div>
      <div class="supprots">
        <div v-for="(item, index) in sellerList_x.supports" :key="index">
          <p>
            <svg
              t="1648370734932"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2209"
              width="16"
              height="16"
            >
              <path
                d="M0 0h1024v1024H0V0z"
                fill="#202425"
                opacity=".01"
                p-id="2210"
              ></path>
              <path
                d="M102.4 102.4a68.266667 68.266667 0 0 1 68.266667-68.266667h682.666666a68.266667 68.266667 0 0 1 68.266667 68.266667v102.4a34.133333 34.133333 0 0 1-34.133333 34.133333H136.533333a34.133333 34.133333 0 0 1-34.133333-34.133333V102.4z"
                fill="#FFAA44"
                p-id="2211"
              ></path>
              <path
                d="M102.4 204.8a68.266667 68.266667 0 0 1 68.266667-68.266667h682.666666a68.266667 68.266667 0 0 1 68.266667 68.266667v771.857067a34.133333 34.133333 0 0 1-44.919467 32.3584l-343.108266-114.346667a68.266667 68.266667 0 0 0-43.144534 0L147.319467 1008.981333A34.133333 34.133333 0 0 1 102.4 976.657067V204.8z"
                fill="#FF7744"
                p-id="2212"
              ></path>
              <path
                d="M375.466667 273.066667a34.133333 34.133333 0 0 1 34.133333 34.133333v34.133333a34.133333 34.133333 0 1 1 0 68.266667v102.4a34.133333 34.133333 0 1 1 0 68.266667v102.4a102.4 102.4 0 0 1-102.4 102.4H273.066667a34.133333 34.133333 0 1 1 0-68.266667h34.133333a34.133333 34.133333 0 0 0 34.133333-34.133333v-102.4H273.066667a34.133333 34.133333 0 1 1 0-68.266667h68.266666v-102.4H273.066667a34.133333 34.133333 0 1 1 0-68.266667h68.266666V307.2a34.133333 34.133333 0 0 1 34.133334-34.133333z m375.466666 0a34.133333 34.133333 0 0 1 34.133334 34.133333v34.133333a34.133333 34.133333 0 0 1-34.133334 34.133334h-170.666666a34.133333 34.133333 0 0 0-34.133334 34.133333v68.266667h204.8a34.133333 34.133333 0 1 1 0 68.266666v204.8a34.133333 34.133333 0 1 1-68.266666 0v-204.8h-136.533334v204.8a34.133333 34.133333 0 1 1-68.266666 0V409.6a102.4 102.4 0 0 1 102.4-102.4h136.533333a34.133333 34.133333 0 0 1 34.133333-34.133333z"
                fill="#FFFFFF"
                p-id="2213"
              ></path>
            </svg>
          </p>
          <p>{{ item }}</p>
        </div>
      </div>
    </div>

    <div class="merchant-pic">
      <div class="pics-title">商家照片</div>
      <div class="pics">
        <p v-for="(item, index) in sellerList_x.pics" :key="index">
          <img :src="item" />
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    // 取vuex商家信息的值
    sellerList_x() {
      return this.$store.state.sellerList;
    },
  },
};
</script>

<style lang="less" scoped>
.merchant {
  width: 100%;
  flex: 1;
  overflow: scroll;
  background-color: #f4f5f7;
  .merchant-info {
    background-color: #fff;
    .merchant-info-name {
      display: flex;
      justify-content: space-around;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 20px 0;
      h3 {
        font-size: 20px;
        padding: 6px;
      }
      .left {
        .sellCount {
          padding: 0 10px;
          color: gray;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
    .merchant-info-detail {
      ul {
        display: flex;
        justify-content: space-around;
        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 10px 0;
          p:nth-child(1) {
            color: gray;
          }
          p:nth-child(2) {
            font-size: 22px;
            padding-top: 4px;
          }
        }
      }
    }
  }
  .merchant-bulletin {
    margin-top: 20px;
    background-color: #fff;
    .bulletin {
      p:nth-child(1) {
        font-size: 20px;
        padding: 10px;
      }
      p:nth-child(2) {
        font-size: 16px;
        color: #f53e11;
        padding: 4px;
      }
    }
    .supprots {
      div {
        display: flex;
        padding: 8px;
        p {
          font-size: 18px;
          padding-left: 2px;
        }
      }
    }
  }
  .merchant-pic {
    background-color: #fff;
    margin-top: 20px;
    .pics-title {
      font-size: 20px;
      padding: 8px;
    }
    .pics {
      display: flex;
      flex-wrap: wrap;
      padding: 8px;
      p {
        padding-right: 10px;
        img {
          width: 150px;
          height: 100px;
        }
      }
    }
  }
}
</style>